<template id="f7-viewbar-instince">
  <f7-viewbar slot="fixed" class="f7-link">
    <f7-link
      v-for="(item, i) in links"
      :key="i"
      :icon-f7="item.icon"
      :text="item.text"
      href="#"
      @click="link(item.href)"
      :tab-link-active="item.tabLinkActive"
    ></f7-link>
  </f7-viewbar>
</template>
<script>
import Config from "../../config";
export default {
  props: {
    links: {
      type: Array,
      default: () => [
        {
          text: "首页",
          icon: "house",
          class: "home",
          // href: "/business/index/",
          href: "/ui/home/index",
          tabLinkActive: true,
        },
        {
          text: "咨询",
          icon: "square_favorites",
          class: "component",
          href: "/ui/notice/index4/",
          tabLinkActive: false,
        },
        {
          text: "工作",
          icon: "bag",
          class: "person",
          href: "/ui/function-entrance/index",
          tabLinkActive: false,
        },
        {
          text: "我的",
          icon: "person",
          class: "person",
          href: "/ui/center/index5",
          tabLinkActive: false,
        },
      ],
    },
  },
  data() {
    return {
      // links: [
      //   {
      //     text: "首页",
      //     icon: "ellipses_bubble",
      //     class: "home",
      //     // href: "/business/index/",
      //     href: "/ui/home/index",
      //     tabLinkActive: true,
      //   },
      //   {
      //     text: "咨询",
      //     icon: "doc_plaintext",
      //     class: "component",
      //     href: "/ui/notice/index4/",
      //     tabLinkActive: false,
      //   },
      //   {
      //     text: "工作",
      //     icon: "square_grid_2x2_fill",
      //     class: "person",
      //     href: "/ui/function-entrance/index",
      //     tabLinkActive: false,
      //   },
      //   {
      //     text: "我的",
      //     icon: "person_alt",
      //     class: "person",
      //     href: "/ui/center/index5",
      //     tabLinkActive: false,
      //   },
      // ],
    };
  },
  methods: {
    fillUrl(url) {
      let r = url;
      if (!this.$util.startsWith(r, "/")) {
        r = "/" + r;
      }
      if (!this.$util.endsWith(r, "/")) {
        r = r + "/";
      }
      return r;
    },
    link(url) {
      this.$f7.views.current.router.navigate(url, { animate: false });
    },
  },
  mounted() {
    var url = this.$f7route.path;
    if (url == "/") {
      url = Config.pages.home;
    }
    this.$util.each(this.links, (c) => {
      c.tabLinkActive = this.fillUrl(c.href) == this.fillUrl(url);
    });
  },
};
</script>
<style lang="less" scoped>
.f7-link::after {
  display: none;
}
.f7-link::before {
  display: none;
}
.f7-link {
  background-color: #ffffff;
  //height: calc(106px * var(--ratio));
  box-shadow: 2px -4px 20px 3px #0000000a;
}
/deep/ .link i + span {
  margin-left: 0px;
  margin-top: 4px;
}
</style>
